<template>
  <!-- 年龄比例 -->
  <div class="echarts">
    <ECharts ref="EChartsRef" :option="option" :resize="true" />
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, watch } from "vue";

import * as echarts from "echarts";
import ECharts from "@/components/ECharts/index.vue";
import { ECOption } from "@/components/ECharts/config";

const props = defineProps({
  // 数据
  lineData: {
    type: Object,
    default: () => {
      return []
    },
  },
  seriesName: {
    type: String,
    default: '',
  },
});
const EChartsRef = ref()
watch(() => props.lineData, (newVal: any) => {
  let xAxisData: any = []
  let yAxisData1: any = []
  //   let xAxisData = newVal? newVal.map((item: any) => item.name) : [];
  // let yAxisData1 = newVal? newVal.map((item: any) => item.value1) : [];
  // let yAxisData2 = newVal.map((item: any) => item.value2);
  nextTick(() => {
    option.value = {
      color: color,
      legend: {
        textStyle: {
          color: "#ffffff"
        },
        right: 10,
        top: 10
      },
      tooltip: {
        trigger: "axis",
        formatter: function (params: any) {
          let html = '';
          params.forEach((v: any) => {
            html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                ${v.seriesName}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                %`;
          })
          return html
        },
        extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
        // axisPointer: {
        //   type: 'shadow',
        //   shadowStyle: {
        //     color: '#ffffff',
        //     shadowColor: 'rgba(225,225,225,1)',
        //     shadowBlur: 5
        //   }
        // }
      },
      grid: {
        top: 100,
        left: 30,
        right: 30,
        containLabel: true
      },
      xAxis: [{
        type: "category",
        boundaryGap: false,
        axisLabel: {
          formatter: '{value}月',
          textStyle: {
            color: "#ffffff"
          }
        },
        axisLine: {
          lineStyle: {
            color: "#ffffff"
          }
        },
        data: xAxisData
      }],
      yAxis: [{
        type: "value",
        name: '单位：%',
        axisLabel: {
          textStyle: {
            color: "#ffffff"
          }
        },
        nameTextStyle: {
          color: "#ffffff",
          fontSize: 12,
          lineHeight: 40
        },
        splitLine: {
          lineStyle: {
            type: "dashed",
            color: "#ffffff"
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      }],
      series: [{
        name: props.seriesName,
        type: "line",
        smooth: true,
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
          normal: {
            color: color[0],
            shadowBlur: 3,
            shadowColor: hexToRgba(color[0], 0.5),
            shadowOffsetY: 8
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [{
                offset: 0,
                color: hexToRgba(color[0], 0.3)
              },
              {
                offset: 1,
                color: hexToRgba(color[0], 0.1)
              }
              ],
              false
            ),
            shadowColor: hexToRgba(color[0], 0.1),
            shadowBlur: 10
          }
        },
        data: yAxisData1
      },
        //  {
        //   name: "2019",
        //   type: "line",
        //   smooth: true,
        //   // showSymbol: false,
        //   symbolSize: 8,
        //   zlevel: 3,
        //   lineStyle: {
        //     normal: {
        //       color: color[1],
        //       shadowBlur: 3,
        //       shadowColor: hexToRgba(color[1], 0.5),
        //       shadowOffsetY: 8
        //     }
        //   },
        //   areaStyle: {
        //     normal: {
        //       color: new echarts.graphic.LinearGradient(
        //         0,
        //         0,
        //         0,
        //         1,
        //         [{
        //           offset: 0,
        //           color: hexToRgba(color[1], 0.3)
        //         },
        //         {
        //           offset: 1,
        //           color: hexToRgba(color[1], 0.1)
        //         }
        //         ],
        //         false
        //       ),
        //       shadowColor: hexToRgba(color[1], 0.1),
        //       shadowBlur: 10
        //     }
        //   },
        //   data: yAxisData2
        // }
      ]
    };
  });
}, { immediate: true });
const option = ref<ECOption>({})
let color = [
  "#0090FF",
  "#36CE9E",
  "#FFC005",
  "#FF515A",
  "#8B5CFF",
  "#00CA69"
];
let echartData = [{
  name: "1",
  value1: 100,
  value2: 233
},
{
  name: "2",
  value1: 138,
  value2: 233
},
{
  name: "3",
  value1: 350,
  value2: 200
},
{
  name: "4",
  value1: 173,
  value2: 180
},
{
  name: "5",
  value1: 180,
  value2: 199
},
{
  name: "6",
  value1: 150,
  value2: 233
},
{
  name: "7",
  value1: 180,
  value2: 210
},
{
  name: "8",
  value1: 230,
  value2: 180
}
];

// let xAxisData = echartData.map(v => v.name);
// ["1", "2", "3", "4", "5", "6", "7", "8"]
// let yAxisData1 = echartData.map(v => v.value1);
// [100, 138, 350, 173, 180, 150, 180, 230]
// let yAxisData2 = echartData.map(v => v.value2);
// [233, 233, 200, 180, 199, 233, 210, 180]
const hexToRgba = (hex: any, opacity: any) => {
  let rgbaColor = "";
  let reg = /^#[\da-f]{6}$/i;
  if (reg.test(hex)) {
    rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
      "0x" + hex.slice(3, 5)
    )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
  }
  return rgbaColor;
}
</script>
<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
